<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <link rel="stylesheet" href="../css/mdui.min.css" crossorigin="anonymous" />
        <link rel="stylesheet" href="css/index.css" crossorigin="anonymous" />
        <script src="../js/mdui.min.js" crossorigin="anonymous"></script>
        <script src="../js/jquery-3.4.1.min.js" crossorigin="anonymous"></script>
        <script src="js/index.js" crossorigin="anonymous"></script>
        <script src="js/method.js" crossorigin="anonymous"></script>
        <title>控制台</title>
    </head>
    <script>
      $(document).ready(function(){
        $('#menu').animate({width:'250px'}, 700);
        $('#yourID').animate({left:'250px'},2100);
        request.ajax.get('html/users.html').then(res => {
          $('#mainPage').html(res);
        }).catch(res => {});

        $('#mainPage').animate({top:'0px', opacity:'1'}, 1300)

        // 获取浏览器可视宽度
        var ScreenWidth = document.body.offsetWidth
        $('#mainPage').css('width', ScreenWidth - 250)
      });
    </script>
    <body style="background-color: #333333; overflow: hidden;">
      <div id="menu" class="mdui-drawer mdui-drawer-full-height mdui-drawer-open">
        <ul class="mdui-list">
          <li class="title" style="margin: 0px;">
            <div>{name}</div>
            <div>控制台</div>
          </li>
          <li class="mdui-list-item mdui-ripple mdui-valign mdui-text-center mdui-ripple-lime">
            <i class="mdui-icon material-icons">&#xe7fd;</i>
            <div class="mdui-list-item-content" style="font-size: 25px;">用户管理</div>
          </li>
        </ul>
      </div>

      <div id="mainPage">

      </div>
      <div id="yourID">
        作为 SupperAdmin -> limo1029 登录
      </div>
    </body>
</html>